<template>
  <div class="artifact-manage">
    <div class="header">
      <TabsCard :current-tab="activeTab" @change-tab="changeTab" :tabList="tabList" />
      <div class="btns">
        <a-button
          class="btn"
          @click="memberMng"
          v-auth="{
            objectId: artifactObj.uuid,
            objectType: ResourceType.repository,
            role: ArtifactRole.manager,
          }"
        >
          <template #icon>
            <SvgIcon name="member-mng" />
          </template>
          成员管理</a-button
        >
        <a-button
          class="btn"
          v-if="[RepositoryEnum.MAVEN, RepositoryEnum.NPM].includes(repository as RepositoryEnum)"
          @click="openAgencyRepository"
          v-auth="{
            objectId: artifactObj.uuid,
            objectType: ResourceType.repository,
            role: ArtifactRole.manager,
          }"
        >
          <template #icon>
            <SvgIcon name="agency-repository" />
          </template>
          代理仓库</a-button
        >
        <a-button class="btn" @click="back">
          <template #icon>
            <SvgIcon name="left-arrow" width="16" height="16" />
          </template>
          返回</a-button
        >
      </div>
    </div>
    <div class="content">
      <template v-if="activeTab === 'artifactGuide'">
        <mavenGuide v-if="repository === RepositoryEnum.MAVEN" />
        <npmGuide v-if="repository === RepositoryEnum.NPM" />
        <dockerGuide v-if="repository === RepositoryEnum.DOCKER" />
      </template>

      <packageGetList v-if="activeTab === 'artifactFileLists'" />
      <namespaceManagement v-if="activeTab === 'artifactNamespaceManagement'" />
    </div>
  </div>
  <AgencyRepositoryModal ref="agencyRepositoryModalRef" />
  <MemberMngModal ref="memberMngRef" />
</template>
<script setup lang="ts">
import { RepositoryEnum } from '@/enums/commonEnum';
import mavenGuide from './guideView/mavenGuide.vue';
import npmGuide from './guideView/npmGuide.vue';
import dockerGuide from './guideView/dockerGuide.vue';
import packageGetList from './packageGetList.vue';
import namespaceManagement from './namespaceManagement.vue';

import AgencyRepositoryModal from './pageModal/agencyRepositoryModal.vue';
import MemberMngModal from './memberMngModal/index.vue';
import { ResourceType } from '@/enums/pipelineEnum';
import { ArtifactRole } from '@/enums/artifactRepositoryEnum';
import { useArtifactRepositoryStore } from '@/store/modules/artifactRepository';

const artifactRepositoryStore = useArtifactRepositoryStore();
const { artifactObj } = artifactRepositoryStore;

const router = useRouter();
const route = useRoute();
const activeTab = ref('artifactGuide');
const repository = ref<string>(route.params.repository as string);
const tabList = ref([
  {
    key: 'artifactGuide',
    tab: '仓库指南',
    repository: [RepositoryEnum.MAVEN, RepositoryEnum.NPM, RepositoryEnum.DOCKER],
  },
  {
    key: 'artifactFileLists',
    tab: '制品文件列表',
    repository: [RepositoryEnum.MAVEN, RepositoryEnum.NPM, RepositoryEnum.DOCKER],
  },
  {
    key: 'artifactNamespaceManagement',
    tab: '命名空间管理',
    repository: [RepositoryEnum.DOCKER],
  },
]);
const agencyRepositoryModalRef = ref();
const memberMngRef = ref();

onBeforeMount(() => {
  tabList.value = tabList.value.filter((item) => item.repository.includes(repository.value as RepositoryEnum));
});

const changeTab = (key: string) => {
  activeTab.value = key;
};

const back = () => {
  router.go(-1);
};

const memberMng = () => {
  memberMngRef.value.onOpen();
};

const openAgencyRepository = () => {
  agencyRepositoryModalRef.value.onOpen();
};
</script>
<style lang="less">
.artifact-manage {
  width: 100%;
  height: 100%;
  .header {
    background-color: #fff;
    width: 100%;
    padding: 0 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    box-shadow: 0px 1px 0px 0px rgba(237, 243, 251, 1);
    border-bottom: 1px solid #edf3fb;
    .btns {
      display: flex;
      gap: 16px;
      .btn {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #2590ff;
        border: 1px solid #2590ff;
      }
    }
  }
  .content {
    background-color: #fff;
    padding: 20px 40px;
  }
}
</style>
